Q: 今天的好像沒有範例？
A: 文長慎入，但有看有差！！

動畫不能只是動畫，還要動得不費力

上一篇有提到在做動畫時，改變不同的屬性在重新渲染畫面時的成本會不相同。本篇要來特別針對上一篇提到的內容詳細講述一下。

畫面渲染

當畫面在渲然時會經過以下步驟：

1. 會先「計算樣式」計算出元素的尺寸及間距等樣式。
2. 透過第一步計算出來的樣式來進行「佈局」。
3. 將元素「渲染」在畫面上。

當不同屬性改變時，因為會影響到的範圍不同，所以重新繪製元素的成本也會不相同。

過去小編對transform及opacity屬性的使用非常少！在了解css屬性改變對畫面渲染的成本影響有區別之前，如果做位移大多會選擇position: absolute定位再加上margin；如果有透明度要修改時也不會選擇操控opacity，而是選擇使用rgba來控制透明度。

過去因工作需求，所以大部分都是使用電腦來看動畫，今年因緣際會下需要將動畫配合手機做調整，才發現原來css的使用對效能的影響也可以很大。 動畫跑在手機上直接當機啊！ 於是後來將之前寫的動畫都改寫過，如果用transform或opacity就可以達到想要的動畫效果，那麼就會減少對渲染成本比較高的屬性做調整，正在看文章的你不妨回去看看自己寫過的動畫，看看在寫動畫時是不是可以將渲染成本比較高的屬性替換成渲染成本低的屬性。

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後敘述～